<template>
    <el-dialog :title="form_title" :visible.sync="isShow" width="50%" :lock-scroll="true" :close-on-click-modal="false">
        <div class="dialog">
            <el-form>
                <el-row :gutter="10">
                    <el-col :span="6" v-for="item in dialogConfig" :key="item">
                        <el-form-item :label="item.placeholder">
                            <el-select
                                v-if="item.type === 'select'"
                                v-model="form1[item.name]"
                                clearable
                                :multiple="item?.multiple ?? false"
                                :placeholder="item.placeholder"
                                @change="
                                    (e) => {
                                        if (item.onChange !== undefined) {
                                            item.onChange(e)
                                        }
                                    }
                                "
                            >
                                <el-option v-for="k in item.options" :key="k.name" :label="k.name" :value="k.id"></el-option>
                            </el-select>
                            <el-select
                                v-if="item.type === 'select_'"
                                v-model="form1[item.name]"
                                clearable
                                :multiple="item?.multiple ?? false"
                                :placeholder="item.placeholder"
                                @change="
                                    (e) => {
                                        if (item.onChange !== undefined) {
                                            item.onChange(e)
                                        }
                                    }
                                "
                            >
                                <el-option v-for="k in item.options" :key="k.label" :label="k.label" :value="k.value"></el-option>
                            </el-select>
                            <el-input v-if="item.type === 'input'" :placeholder="item.placeholder" v-model="form1[item.name]"></el-input>
                            <el-cascader
                                v-if="item.type === 'cascader'"
                                :placeholder="item.placeholder"
                                :options="item.options"
                                :show-all-levels="item?.showAllLevels ?? false"
                                :props="{ checkStrictly: item?.checkStrictly ?? true, multiple: item?.multiple ?? false }"
                                clearable
                                v-model="form1[item.name]"
                                @change="
                                    (e) => {
                                        if (item.onChange !== undefined) {
                                            item.onChange(e)
                                        }
                                    }
                                "
                            ></el-cascader>
                            <el-button v-if="item.type === 'button'" @click="item.click" type="primary" size="small">{{ item.text }}</el-button>
                        </el-form-item>
                    </el-col>
                    <cl-col v-if="sensors.length != 0">
                        <table class="sensor_table" border="1px solid #66B1FF">
                            <tr>
                                <th>通道编号</th>
                                <th>绑定测点</th>
                                <th>灵敏系数(mv/g)</th>
                            </tr>
                            <tr v-for="(item, index) in sensors">
                                <td>{{ item.address }}</td>
                                <td>{{ item.sensor_name }}</td>
                                <td><el-input v-model="item.sensitivity"></el-input></td>
                            </tr>
                        </table>
                    </cl-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col>
                        <el-button @click="setSensor" type="primary" size="small">匹配通道</el-button>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col>
                        <el-button type="primary" @click="submit">提交</el-button>
                        <el-button @click="isShow = false">取消</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- <el-dialog width="30%" :visible.sync="treeShow" append-to-body :close-on-click-modal="false">
            <el-tree :data="treeData" highlight-current node-key="pid" :show-checkbox="true" :filter-node-method="filterNode" @check-change="handleCheckChange" ref="tree">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>
                        <i :class="data.icon"></i>
                        {{ node.label }}
                    </span>
                </span>
            </el-tree>
            <div style="margin-top: 10px">
                <el-button type="primary" size="small" @click="getCheckedKeys">确认</el-button>
                <el-button size="small" @click="treeShow = false">取消</el-button>
            </div>
        </el-dialog> -->
    </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
import { dialogConfig } from './formConfig.js'
import { requestApi } from '@/requset/api'
import { deepClone } from '@/plugins/clone'
import { addForm } from './formConfig.js'
import zyDevice from '@/components/common/zyDevice.vue'
export default {
    data() {
        return {
            isShow: false,
            dialogConfig: null,
            channels: 0,
            treeShow: false,
            treeData: [],
            checkNodes: [],
            form1: {},
            sensors: [],
            form_title: '',
            acqList: [],
        }
    },
    components: {
        zyDevice,
    },
    computed: {
        ...mapState('backstage', ['backstageData', 'sensorType']),
    },
    methods: {
        handleCheckChange() {
            const nodes = this.$refs.tree.getCheckedNodes()
            const leafNodes = nodes.filter((node) => node.type == 's' && node.checked !== false)
            if (this.channels == 0) return
            else {
                if (this.channels < leafNodes.length) {
                    this.$message.warning('绑定测点数大于通道数!')
                }
            }
        },

        doOpen(val) {
            if (val) {
                let setList = (userLevel, list) => {
                    if (userLevel === 'zone') {
                        return list.slice(3, 4)
                    } else if (userLevel === 'factory') {
                        return list.slice(2, 4)
                    } else if (userLevel === 'company') {
                        return list.slice(1, 4)
                    } else {
                        return list
                    }
                }
                let { group_id, company_id, factory_id, zone_id, sensors, sensor_type } = val
                try {
                    var arr = this.sensorType.filter((e) => e.id == sensor_type)
                    var { channels } = arr[0]
                    this.channels = channels
                } catch (e) {
                    this.channels = 0
                }
                this.form_title = '编辑'
                this.form1 = deepClone(val)
                this.sensors = JSON.parse(sensors)
                this.form1.scope_id_list = setList(sessionStorage.getItem('userLevel'), [Number(group_id), Number(company_id), Number(factory_id), Number(zone_id)])
            } else {
                this.form1 = deepClone(addForm)
                this.sensors = []
                this.channels = 0
                this.form_title = '添加'
            }
            this.$nextTick(() => {
                this.isShow = true
            })
        },
        setSensor() {
            if (this.form1.scope_id_list) var id = this.form1.scope_id_list[this.form1.scope_id_list.length - 1]
            else {
                this.$message.info('请先选择筛选范围')
                return
            }
            if (this.form1.number) {
                var number = this.form1.number
            } else {
                this.$message.info('请先输入终端编号')
                return
            }
            requestApi('post', 'sensor/set/terminal', { number, id }).then((res) => {
                if (res.data.code == 0) {
                    let list = res.data.data
                    if (list.length == 0) {
                        this.$message.info('无匹配测点或终端编号格式不对')
                        return
                    } else {
                        this.sensors = list
                    }
                }
            })
        },
        filterNode(value, data) {
            if (!value) return true
            return data.type == 'd' && data.pid == `zone${value}`
        },
        handlerSensorTypeChange(e) {
            let arr = this.sensorType.filter((val) => val.id == e)
            let { channels } = arr[0]
            this.channels = channels
        },
        add(obj) {
            requestApi('post', 'wavecoll/add', obj, true).then((res) => {
                if (res.data.code == 0) {
                    this.$message.success('添加成功')
                    this.isShow = false
                    this.$emit('search')
                }
            })
        },
        edit(obj) {
            requestApi('post', 'wavecoll/edit', obj, true).then((res) => {
                if (res.data.code == 0) {
                    this.$message.success('编辑成功')
                    this.isShow = false
                    this.$emit('search')
                }
            })
        },
        submit() {
            try {
                let { scope_id_list } = this.form1
                this.form1.group_id = scope_id_list[0]
                this.form1.company_id = scope_id_list[1]
                this.form1.factory_id = scope_id_list[2]
                this.form1.zone_id = scope_id_list[3]
                this.form1.sensors = JSON.stringify(this.sensors)
                if (this.form_title == '添加') {
                    this.add(this.form1)
                } else {
                    this.edit(this.form1)
                }
            } catch (error) {
                this.$message.error('请完善表单')
            }
        },
        handleScopedChange(e) {},
        getAcq() {
            return requestApi('post', 'waveacq' + `/getlist`, { page: 1 }, false).then((res) => {
                if (res.data.code == 0) {
                    this.acqList = res.data.data
                }
            })
        },
    },
    created() {
        this.dialogConfig = dialogConfig
        this.dialogConfig[1].options = this.sensorType
        this.dialogConfig[3].options = this.backstageData
        this.getAcq().then(() => {
            this.dialogConfig[4].options = this.acqList
        })
        this.dialogConfig[1].onChange = (val) => this.handlerSensorTypeChange(val)
        this.dialogConfig[3].onChange = (val) => this.handleScopedChange(val)
    },
}
</script>

<style lang="less" scoped>
.dialog {
    .table {
        .row {
            display: flex;
            height: 20px;
            line-height: 20px;
            justify-content: space-around;
            margin-bottom: 10px;
        }

        .ths {
            width: 100%;
            max-height: 40vh;
            // background-color: aliceblue;
            display: flex;
            overflow-y: auto;
            justify-content: space-around;
            margin-bottom: 4px;
        }
    }

    .sensor_table {
        max-height: 14vh;
        border-collapse: collapse;
        width: 90%;
        margin-left: 5%;
        border: 1px solid #007bff;
        border-radius: 4px;

        th,
        td {
            padding: 8px;
            border-bottom: 1px solid #007bff;
        }

        tr {
            color: rgb(130, 187, 237) !important;
            display: flex;
            width: 100%;

            th {
                width: 200px;
                height: 24px;
                line-height: 24px;
                font-weight: bold;
            }

            th:nth-child(1),
            td:nth-child(1) {
                width: 20%;
            }

            th:nth-child(2),
            td:nth-child(2) {
                width: 60%;
            }

            th:nth-child(3),
            td:nth-child(3) {
                width: 20%;
                display: flex;
                align-items: middle;

                .el-input {
                    .el-input__inner {
                        height: 30px !important;
                    }
                }
            }

            td {
                height: 40px !important;
                line-height: 40px !important;
                text-align: center;
            }
        }
    }
}
</style>
